<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>我是主页</h1>
    <button>主页</button>
    <button>产品页面</button>
    <button>用户页面</button>
    <script>
        var btns = document.querySelectorAll("button");
        btns.forEach(function (item, key) {
            item.onclick = function () {
                // 修改地址的hash值，不会让地址重新加载
                window.location.hash = "page" + (key + 1);
                renderDom();
            }
        })

        // 通过hash值 来区分页面

        function renderDom() {
            // 获取hash值来区分不同的页面
            var hashstr = window.location.hash;
            console.log(hashstr);
            var h1Ele = document.querySelector("h1");
            switch (hashstr) {
                case '#page1':
                    h1Ele.innerHTML = "主页";
                    break;
                case '#page2':
                    h1Ele.innerHTML = "产品页面";
                    break;
                case '#page3':
                    h1Ele.innerHTML = "用户页面";
                    break;
                default:
                    console.log("hash值错误");
                    break;
            }
        }


    </script>
</body>

</html>